<template>
  <div class="img">
    <img src="https://m.jr.jd.com/vip/borrowMoney/widget/jdGold/i/goldCard.png" alt="">
    <p class="txt1">最高可借</p>
    <p class="txt2"><span>¥</span>300,000</p>
    <p class="txt3" :style="{background: 'url(' + btnurl + ')' }">立即登录</p>
  </div>
</template>

<script>
import Btnurl from '@/assets/imgs/btnBj.png'
export default {
  name: 'Headimg',
  data () {
    return {
      btnurl: Btnurl
    }
  }
}
</script>

<style lang="stylus" scoped>
  .img
    display flex
    justify-content center
    align-items center
    height 462px
    position relative
    color #fff;
  .txt1
    position absolute
    top 18%
    left 13%
    font-size 36px
  .txt2
    position absolute
    top 30%
    left 13%
    font-size 80px
    font-family DINAlternate-Bold
    text-shadow 0 20px 20px rgba(63,39,0,.2)
    span
      font-size 55px
      margin-right 20px
  .txt3
    position absolute
    top 56%;
    left 13%;
    font-size 28px
    font-weight 500
    width 206px
    height 65px
    display flex
    justify-content center
    align-items center
    background-size 100% 100%
</style>
